<template>
  <view class="page page-primary page-unauthorized">
    <page-header theme="colorful"></page-header>
    <view class="page-content">
      <view class="page-content-title">
				<view class="user-wrapper">
					<image :src="userInfo.avatar || '/static/images/company/person-head.png'" class="user-avatar"></image>
					<view>
						<fui-text class="user-name" :text="userInfo.nickname" size="32" fontWeight="bold" color="#fff"></fui-text>
						<fui-text :text="roleText" size="24" color="#ededed"></fui-text>
					</view>
					<view class="user-company">{{ deptName }}</view>
				</view>

				<view v-if="tenantList.length > 1" class="user-change" @click="tab.navigateTo(tenantLink)"><fui-icon name="switch" size="40" color="#fff"></fui-icon></view>
			</view>
      
      <view class="page-main" v-if="status">
        <view v-if="status === '待认证'">
          <fui-icon class="unauthorized-icon" customPrefix="iconfont" name="vms-icon-tishi" size="128"></fui-icon>
          <view class="unauthorized-text">
            您当前还需进行<text class="unauthorized-text_red">公司认证</text>，在完成公司认证后，即可享受供应链数字化运营平台专属服务，期待您的加入，谢谢。
          </view>
          <fui-button text="立即认证" height="88rpx" radius="16rpx" size="32" @click="tab.navigateTo(authorizationLink)"></fui-button>
        </view>
        <view v-if="status === '待审核'">
          <EnableStatus :isStatusComp="true" childProp="submit" />
        </view>
        <view v-if="status === '已驳回'">
          <EnableStatus :isStatusComp="true" statusTitle="认证申请已驳回" :statusText="errorText" childProp="fail" />
          <fui-button v-if="userType === '2'" text="重新认证" height="88rpx" radius="16rpx" size="32" @click="tab.navigateTo(authorizationLink)"></fui-button>
        </view>
        <fui-button class="ui-btn-primary_plain" text="退出登录" height="88rpx" radius="16rpx" :margin="['24rpx', 0]" size="32" @click="handleToLogout"></fui-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { useStore } from 'vuex'
import pageHeader from '@/components/header'
import EnableStatus from '@/components/popup/register'
import supplierApi from '@/api/supplier'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const authorizationLink = '/pages/authentication/Index'
const tenantLink = '/pages/user/tenant'

const { userType, companyId, currentDeptId } = store.getters

// 用户信息
const { roles } = store.getters
const userInfo = computed(() => store.getters.userInfo)
const deptName = computed(() => store.getters.currentDeptName)
const roleText = computed(() => {
  if (roles.indexOf('scm_gyl_yyjl') > -1) {
    return '供应链负责人'
  } else if (roles.indexOf('scm_gysfzr') > -1) {
    return '供应商负责人'
  } else if (userInfo.value.roles && userInfo.value.roles[0]) {
    return userInfo.value.roles[0].name
  } else {
    return ''
  }
})

const status = ref('')
const companyData = ref({})
const errorText = computed(() => {
  if (userType === '1') {
    return 'hide'
  } else {
    return companyData.value.reviewedComments ? `驳回原因：${companyData.value.reviewedComments}` : ''
  }
})

// 获取当前租户列表
const tenantList = computed(() => store.getters.tenantList)
store.dispatch('GetTenantList')

// 获取供应链详情
const getSupplyDetail = () => {
  try {
    if (companyId) {
      supplierApi.getSupplyDetail(companyId, currentDeptId).then((res) => {
        if (res.code === 0 && res.data) {
          companyData.value = {
            ...res.data.info,
            companyName: res.data.info.name
          }
          // 供应链无审核状态
          // if (companyData.value.attestationState == 0) {
          //   status.value = '已驳回'
          // } else {
          //   status.value = '待审核'
          // }
          status.value = '待认证'
        } else {
          modal.msgError(res.msg)
        }
      })
    }
  } catch (e) {
    modal.msgError('获取供应链数据失败')
  }
}

// 获取供应商详情
const getSupplierDetail = () => {
  try {
    if (companyId) {
      supplierApi.getSupplierDetail(companyId).then((res) => {
        if (res.code === 0 && res.data) {
          companyData.value = res.data
          if (companyData.value.attestationState == 2) {
            status.value = '待审核'
          } else if (companyData.value.attestationState == 3) {
            status.value = '已驳回'
          } else {
            status.value = '待认证'
          }
        } else {
          modal.msgError(res.msg)
        }
      })
    }
  } catch (e) {
    modal.msgError('获取供应商数据失败')
  }
}

if (userType === '1') {
  getSupplyDetail()
} else {
  getSupplierDetail()
}


// 退出登录
const handleToLogout = () => {
  modal.confirm('确认退出？').then(() => {
    store.dispatch('LogOut')
  })
}
</script>

<style lang="scss" scoped>
.page-unauthorized {
  .page-content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 42rpx;
    .user-wrapper {
			position: relative;
			padding-left: 100rpx;
			.user-avatar {
				position: absolute;
				top: 50%;
				left: 0;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 2rpx solid rgba(255, 255, 255, .2);
				margin-top: -40rpx;
			}
			.user-name {
				margin-right: 20rpx;
			}
			.user-company {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-weight: normal;
				color: #ccc;
			}
		}
  }
  .page-main {
    border-radius: 16rpx;
    background-color: var(--fui-bg-color);
    margin-top: 46rpx;
    padding: 40rpx;
    .unauthorized-icon {
      display: block;
      margin: 0 auto;
      color: var(--fui-color-danger) !important;
    }
    .unauthorized-text {
      margin-top: 48rpx;
      margin-bottom: 60rpx;
      font-size: 28rpx;
      text-indent: 56rpx;
      .unauthorized-text_red {
        color: var(--fui-color-danger);
      }
    }
  }
}
</style>
